<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../swiper/swiper-3.3.1.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../swiper/animate.min.css"/>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			html,body{
				width: 100%;
				height: 100%;
			}
			img{
				display: block;
				margin: 0 auto;
			}
			.swiper-container{
				width: 100%;
				height: 100%;
				background: #002036;
			}
			
			.s1{
				width: 100%;
				height: 100%;
				background: #002035;
				position: relative;
			}
			.img-1-1{
				width: 5.2rem;
				height: 5.2rem;
				margin-top: 0.1rem;
			}
			.img-1-2{
				width: 3rem ;
				height: 2.8rem;
				margin-top: 1rem;
			}
			/*下面的小三角*/
			.img-1-3{
				width: 0.5rem;
				height: 0.2rem;
				position:absolute;
				bottom:0.5rem;
				left:0;
				right: 0;
				animation:move 1s ease-in infinite alternate;
			}
			@keyframes move{
				from{
					transform: translateY(-1rem);
				}
				50%{
					transform: translateY(0rem);
				}
				to{
					transform: translateY(1rem);
				}
			}
			
			.swiper-container1{
				background-color: #8350bb;
			}
			
			.img-2-1-1{
				width:3.5rem;
				height:2.5rem;
				margin-top: 0.5rem;
			}
			.center2 {
				position: relative;
			}
			/*人背后的元*/
			.imgc_1{
				width:5rem;
				height:5rem;
				position: absolute;
				top:0.5rem;
				left:0;
				right: 0;
			}
			/*人*/
			.imgc_2{
				width: 5rem;
				height: 5rem;
				position: absolute;
				top:1rem;
				left:0;
				right: 0;
			}
			/*人旁边的纸*/
			.imgc_3{
				width: 5rem;
				height: 7rem;
				position: absolute;
				top:-2rem;
				left:1rem;
			}
			/*带箭头的字*/
			.img2-3{
				position: absolute;
				bottom: 1.5rem;
				width: 3rem;
				height: 0.4rem;
				left: 0;
				right: 0;
			}
			/*第二页的第1张图*/
			.img22-1{
				width: 5rem;
				height:6rem;
				margin-top: 1rem;
			}
			/*第二页的第2张图*/
			.img22-2{
				margin-top: 1.5rem;
				width: 4rem;
				height: 0.9rem;
			}
			.swiper-container2{
				background-color: #ff430f;
			}
			
			.s31 .imgc_2{
				width: 3.5rem;
				height: 4.5rem;
				left: 1.5rem;
				top:1.3rem;
			}
			.s31 .imgc_3{
				width:5.5rem;
				height:3rem;
				left: 0.5rem;
				top:2.5rem;
			}
			.swiper-container3{
				background:#ffb422;
			}
			.s41 .imgc_1{
				top:0.5rem;
			}
			.s41 .imgc_2{
				width: 3.5rem;
				height: 4.5rem;
				top:1rem;
			}
			.s41 .imgc_3{
				width:5.5rem;
				height:4rem;
				top:1rem;
				left:0.5rem;
			}
			.img4-1{
				position: absolute;
				bottom:2.3rem;
				left: 0;
				right: 0;
				width: 4rem;
				height: 0.5rem;
			}
			.s5{
				background: #002036;
			}
			.s5 .img5-1{
				width: 5.5rem;
				height: 5.5rem;
				margin-top: 1rem;
			}
			.s5 .img5-2{
				width: 4rem;
				height: 0.9rem;
				margin-top: 1.5rem;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide s1">
		        	<img src="img/cover.png" class="img-1-1"/>
		        	<img src="img/wording_cover.png" class="img-1-2"/>
		        	<img src="img/icon_up.png" class="img-1-3"/>
		        </div>
		        <div class="swiper-slide swiper-container1">
		        	<div class="swiper-wrapper s2">
		        		<div class="swiper-slide s21">
		        			<img src="img/wording.png" class="img-2-1-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        			<section class="center2">
		        				<img src="img/circle.png" class="imgc_1 ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"/>								<img src="img/people.png" class="imgc_2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
								<img src="img/floating_develop.png" class="imgc_3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"/>
		        			</section>
		        			<img src="img/check_develop.png" class="img2-3 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"/>
		        			<img src="img/icon_up.png" class="img-1-3"/>
		        		</div>
		        		<div class="swiper-slide s22">
		        			<img src="img/introduction.png" class="img22-1 ani" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"/>
		        			<img src="img/btn_develop.png" class="img22-2 ani" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"/>
		        			<img src="img/icon_up.png" class="img-1-3"/>
		        		</div>
		        		 <!-- 如果需要滚动条 -->
		  		 		<div class="swiper-scrollbar"></div>
		        	</div>
		        </div>
		        <div class="swiper-slide swiper-container2">
		        	<div class="swiper-wrapper">
		        		<div class="swiper-slide s31">
		        			<img src="img/wording_design.png" class="img-2-1-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        			<section class="center2">
		        				<img src="img/circle-design.png" class="imgc_1 ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
								<img src="img/people_design.png" class="imgc_2 ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
								<img src="img/floating_design.png" class="imgc_3 ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"/>
		        			</section>
		        			<img src="img/check_design.png" class="img2-3 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s"/>
		        			<img src="img/icon_up.png" class="img-1-3"/>
		        		</div>
		        		<div class="swiper-slide s32">
		        			<img src="img/introduction_design.png" class="img22-1 ani" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        			<img src="img/btn_design.png" class="img22-2 ani" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        			<img src="img/icon_up.png" class="img-1-3"/>
		        		</div>
		        	</div>
		        </div>
		        <div class="swiper-slide swiper-container3">
		        	<div class="swiper-wrapper">
		        		<div class="swiper-slide s41">
		        			<img src="img/wording_production.png" class="img-2-1-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        			<section class="center2">
		        				<img src="img/circle-production.png" class="imgc_1 ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
								<img src="img/people_production.png" class="imgc_2 ani" swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
								<img src="img/floating_production.png" class="imgc_3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"/>
		        			</section>
		        			<img src="img/pic_shadow_production.png" class="img4-1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s"/>
		        			<img src="img/check_production.png" class="img2-3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.4s"/>
		        			<img src="img/icon_up.png" class="img-1-3"/>
		        		</div>
		        		<div class="swiper-slide s42">
		        			<img src="img/introduction_production.png" class="img22-1  ani" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        			<img src="img/btn_production.png" class="img22-2 ani" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        			<img src="img/icon_up.png" class="img-1-3"/>
		        		</div>
		        	</div>
		        </div>
		        <div class="swiper-slide s5">
		        	<img src="img/pic_back.png" class="img5-1 ani" swiper-animate-effect="flipInX" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        	
		        	<img src="img/btn_join.png" class="img5-2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"/>
		        </div>
			</div>
		</div>
	</body>
	<script src="../../swiper/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../swiper/swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../swiper/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			var sw=new Swiper(".swiper-container",{
				direction:"vertical",
				onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				    swiperAnimateCache(swiper); //隐藏动画元素 
				    swiperAnimate(swiper); //初始化完成开始动画
				}, 
				onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				} 
			})
			
			var sw1=new Swiper(".swiper-container1",{
				 // 如果需要滚动条
			    scrollbar: '.swiper-scrollbar',
				onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				} 
			});
			var sw2=new Swiper(".swiper-container2",{
				onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				} 
			});
			var sw3=new Swiper(".swiper-container3",{
				onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				} 	
			});
			
		})
		
		
		
	</script>
</html>
